<!DOCTYPE html>
<!--suppress ALL-->
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no,minimal-ui">
    <title>重置密码-市场摊位租赁竞拍系统</title>
    <script type="text/javascript" th:src="@{/asserts/js/jQuery-3.6.0.js}"></script>
    <link rel="stylesheet" type="text/css" th:href="@{/asserts/css/reset.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/asserts/css/global.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/asserts/css/web.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/asserts/css/k15.css}"/>
    <script th:src="@{/asserts/js/vue.js}"></script>
    <script th:src="@{/asserts/js/axios.min.js}"></script>


    <style type="text/css">
        .clearfix {
            zoom: 1;
            clear: none!important;
        }
        /*#clear{*/
        /*    clear: both;*/
        /*    *zoom: 1;*/
        /*}*/
        .center-box{
            width: 1190px;
            margin: 0 auto;
        }
        .biddingBox{
            position: relative;
            border: solid 1px #efe3e3;
            height: 500px;
            background: #FFFFFF;
        }
         .item-status {
             margin-top: 18px;
             margin-left: 18px;
            display: inline-block;
            font-size: 15px;
            background-color: #6E7FA2;
            color: #fff;
            border-radius: 2px;
            padding: 0 5px;
            line-height: 20px;
            height: 20px;
            font-weight: 400;
            margin-right: 4px;
            position: relative;
            bottom: 1px;
        }
         .title-font{
             font-size: 15px;
             font-weight: 600;
         }
         .pic-box{
             border: 2px solid #fff;
             position: relative;
             z-index: 1;
             margin: 0 10px 0 0;
             overflow: hidden;
             background: #f7f7f7;
             overflow: hidden;
             float: left;
             margin-top: 20px;
             margin-left: 20px;
             width: 440px;
             height: 295px;
             *font-size: 258px;
             border: none;
             *display: inline;
         }
        .pic-box img {
            max-width: 440px;
            max-height: 295px;
        }
         /*.pm425{*/
         /*    overflow: hidden;*/
         /*    float: left;*/
         /*    margin-top: 20px;*/
         /*    margin-left: 20px;*/
         /*    width: 440px;*/
         /*    height: 295px;*/
         /*    *display: inline;*/
         /*    *font-size: 258px;*/
         /*    border: none;*/
         /*}*/
         .sign-box{
             border: 2px solid #fff;
             position: relative;
             z-index: 1;
             margin: 0 10px 0 0;
             overflow: hidden;
             background: #f7f7f7;
             float: left;
             margin-top: 20px;
             margin-left: -11px;
             width: 491px;
             height: 440px;
             *display: inline;
             *font-size: 258px;
             border: none;
         }
        /*.pm426{*/
        /*    float: right;*/
        /*    margin-top: 20px;*/
        /*    margin-left: 20px;*/
        /*    width: 440px;*/
        /*    height: 295px;*/
        /*    *display: block;*/
        /*    *font-size: 258px;*/
        /*    border: none;*/
        /*}*/

        .auctionRoom-box{
            /*border: 2px solid #fff;*/
            border: 2px solid #efe3e3;
            position: absolute;
            top: 19px;
            left: 26px;
            z-index: 1;
            margin: 0 10px 0 0;
            overflow: hidden;
            background: #ffffff;
            float: left;
            margin-top: -20px;
            margin-left: 924px;
            width: 235px;
            height: 498px;
            *display: inline;
            *font-size: 258px;
            /*border: none;*/
        }
        .countdown-title{
            font-size: 10px;
            color: #aca7a7;

        }
        .countdown-box{

            margin-left: 20px;
        }
        .coundown-time{
            font-size: 20px;
            font-weight: 600;
            color: black;
        }

        .starting-price{
            margin-bottom: 10px;
            margin-top: 20px;
            margin-left: 20px;
        }
        .hint-box{
            margin-left: 20px;
            background: url(//img.alicdn.com/tfs/TB1SPBuKQvoK1RjSZFwXXciCFXa-26-26.png) no-repeat;
            background-size: 12px 12px;
            padding-left: 20px;
            min-height: 20px;
            line-height: 20px;
            background-position: left;
                }
        .hint{
            padding-top: 10px;
            height: 50px;
            background: #efe3e3;
        }

        .bid-box{
            background-color: #f3f3f3;
            padding: 12px 20px 11px;
            color: #666;
        }
        .bid2-box{
            margin-top: 10px;
            margin-top: 20px\9;
        }

       .bid-box dt {
            width: 50px;
            text-align: left;
            margin-right: 15px;
            height: 24px;
            line-height: 40px;
        }
        .bid-box .price-input {
            width: 236px;
            height: 40px;
            float: left;
            line-height: 40px;
        }

        .bid-box dd, .bid-box dt {
            float: left;
            position: relative;
            width: 40px;
        }
        .bid-box input, .bid-box select {
            position: relative;
            border: 1px solid #c2bbba;
            vertical-align: middle;
            font-size: 20px;
            padding-left: 10px;
        }

        .sign-btn{
            position: absolute;
            top: 2px;
            left: 248px;
            float: left;
            margin-left: 2px;
        }
        .sign-btn .plus-btn{
            height: 20px;
            background-position: 0 0;
            margin-bottom: 1px;
            background: transparent url(//gtms04.alicdn.com/tps/i4/T1f0DSXblmXXXmsWjt-250-72.png) 0 -52px no-repeat;

            display: block;
            width: 32px;
            text-indent: -999em;
        }

        .sign-btn .minu-btn{
            height: 20px;
            background-position: 0 0;
            margin-bottom: 1px;
            background: transparent url(//gtms04.alicdn.com/tps/i4/T1f0DSXblmXXXmsWjt-250-72.png) -33px -52px no-repeat;

            display: block;
            width: 32px;
            text-indent: -999em;
        }

        .bid-num{
            position: relative;
            margin: 0 12px 0 19px;
            padding: 15px 0 6px 0;
            border-bottom: 1px solid #e9e9e9;
            text-align: right;
            color: #bbb;
            font-size: 18px;
            font-weight: 200;
            font-family: '\5b8b\4f53',arial tahoma,'Hiragino Sans GB',sans-serif;
        }

        .bidLog{
            height: 19px;
            position: absolute;
            left: 0;
            top: 20px;
        }
        .bid-num-join{
            display: inline-block;
            *display: inline;
            *zoom: 1;

        }

        .bid-num em {
            font-style: normal;
            font-weight: 400;
            color: #666;
            font-family: tahoma,'Hiragino Sans GB','\5b8b\4f53',sans-serif;
            font-size: 15px;
        }

        .bidDetail{
            padding: 7px 0 0 6px;
            line-height: 24px;
            background: url(//img.alicdn.com/tfs/TB1_rS_mC_I8KJjy0FoXXaFnVXa-502-81.png) no-repeat center;
        }

        .bid-info{
            border-collapse: collapse;
            width: 100%;
            height: 80px;
        }
        .bid-info td {
            font-size: 12px;
            color: #777;
            cursor: pointer;
        }
        .payPrice{
            font-family: tahoma;
        }
        .m-i{
            font-size: 12px;
            font-weight: 400;
            font-family: arial,tahoma,'Hiragino Sans GB','\5b8b\4f53',sans-serif;
        }
        .c-f{
            display: inline-block;
            *display: inline;
            *zoom: 1;
        }

        .pay-mark {
            padding-left: 18px;
            color: #666;
            height: 24px;
            line-height: 20px;
            overflow: hidden;
            text-align: justify;
            text-align-last: justify;
            text-justify: distribute-all-lines;
            vertical-align: -10px;
            -moz-text-align-last: justify;
            -webkit-text-align-last: justify;
        }

        .pay-first{
            position: relative;
            width: 86px;
            text-align: left;
        }


        .pay-first-icon{
            position: absolute;
            top: 50%;
            margin-top: -8px;
            left: 79px;
            width: 12px;
            height: 12px;
            background-position: -40px -40px;
            background: url(//gtms03.alicdn.com/tps/i3/TB1KLG0GXXXXXXcXFXX52LiUFXX-52-180.png) no-repeat -999px -999px;

        }

        .bid-submit dt {
            height: 28px;
            line-height: 28px;
        }

        .bid-submit .line {
            margin-bottom: 10px;
            margin-top: 5px;
        }

        a.pm-apply-foregift {
            height: 40px;
            line-height: 17px;
            padding-top: 6px;
        }

        a.pm-apply-button {
            border-color: #ba0100;
            background-color: #C21F3A;
            color: #fff;
            text-align: center;
            cursor: pointer;
        }

        .pm-button-new {
            width: 248px;
            height: 33px;
            line-height: 33px;
            text-align: center;
            font-size: 14px;
            border: 1px solid transparent;
        }

        .pm-button-new .foregift {
            font-size: 12px;
        }
        .chat-box{
            border-radius: 3px;
            background: skyblue;

        }







</style>
</head>

<body onload="countDown()">

<div id="app">
    <div id="endTime" class="in-wrap center-box" style="height: auto">
        <header th:replace="~{commons/tag::headerBar}"></header>

<!--    模块一    -->

        <div   class="biddingBox" th:each="a : ${auctionStallList}">
            <span class="item-status" th:text="${a.stallName}">第一次</span> &nbsp;&nbsp;
            <span class="title-font" th:text="${a.introduce}">【捡漏 】新车落地149万多进口奥迪Q7 精品车 可按揭过户</span>
            <p></p>

            <!--摊位图片-->
            <div  class="pic-box">
                <img th:src="'http://localhost:81/img/marketStall/'+${a.stallImg}">

            </div>
            <div  ></div>
            <!--报名div-->
            <div  class="sign-box">

                <div class="countdown-box">
                    <span class="countdown-title">距结束</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <span class="coundown-time" th:text="${#dates.format(a.pEndauctionTime, 'yyyy-MM-dd HH:mm:ss')}" style="display: none">2022-08-05 15:24:00</span>
                    <span class="day" style="background-color: #1c1c1c;color: white;width: 20px;height: 20px"></span>天:
                    <span class="hour" style="background-color: #1c1c1c;color: white;width: 20px;height: 20px"></span>时:
                    <span class="minute" style="background-color: #1c1c1c;color: white;width: 20px;height: 20px"></span>分:
                    <span class="second" style="background-color: #1c1c1c;color: white;width: 20px;height: 20px"></span>秒
                </div>
                <div class="starting-price">
                    <span class="countdown-title" >起始价</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <span v-if="r.bidPrice == null" class="coundown-time" th:text="${a.pStartauctionPrice}">04天01时00分21.6秒</span>
                    <span v-if="r.bidPrice != null" class="coundown-time" >{{bidPrice}}</span>
                </div>
                <div class="hint">
                    <p class="hint-box">成交后，需另付软件服务费(成交价的0.5%~1%)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;    <a href="javascript:void(0)">查看详情 >></a></p>
                    <p class="hint-box">成交后，需另付佣金(成交价的5%)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;     <a href="javascript:void(0)">查看详情 >></a></p>
                </div>
                <!--出价-->
                <div class="bid-box">
                    <dl class="bid2-box clearfix">
                        <dt>
                        <label>出&nbsp;&nbsp;价</label>
                        </dt>
                        <dd>
<!--                            <input  v-if="r.bidPrice != null"  id="price-input"  class="price-input" type="text" readonly disabled="disabled"  v-bind:value="r.bidPrice" maxlength title="出价框 ， 请输入拍卖价格" th:data-range="${a.pAddPrice}" th:data-min="${a.pMinPrice}" data-max="9999999999">-->
                            <input  v-if="r.bidPrice != null"  id="price-input"  class="price-input" type="text" readonly disabled="disabled"  v-model="bidPrice" maxlength title="出价框 ， 请输入拍卖价格" th:data-range="${a.pAddPrice}" th:data-min="${a.pMinPrice}" data-max="9999999999">
                            <input    v-if="r.bidPrice == null"  id="price-input"    class="price-input" type="text" readonly disabled="disabled" th:value="${a.pStartauctionPrice}" maxlength title="出价框 ， 请输入拍卖价格" th:data-range="${a.pAddPrice}" th:data-min="${a.pMinPrice}" data-max="9999999999">
                           <input type="hidden" name="price">
                            <div class="sign-btn">
                                <a href="#" v-if="r.bidPrice != null" class="plus-btn" v-on:click="addPrice(r.bidPrice , r.pAddPrice)" title="加价">+</a>
                                <a href="#" v-if="r.bidPrice != null"  class="minu-btn"  v-on:click="ReducedPrice(r.bidPrice , r.pAddPrice)" title="减价">-</a>
                                <a href="#" v-if="r.bidPrice == null"  class="plus-btn" th:onclick="'addPrice1('+${a.pStartauctionPrice}+','+${a.pAddPrice}+')'" title="加价">+</a>
                                <a href="#" v-if="r.bidPrice == null"  class="minu-btn" th:onclick="'ReducedPrice1('+${a.pStartauctionPrice}+','+${a.pAddPrice}+')'" title="减价">-</a>
                            </div>
                        </dd>
                    </dl>

                    <dl class="bid-submit clearfix">
                        <dt></dt>
                        <dd>
                            <div class="line">
                                <a href="javascript:void(0)" v-if="r.username == username" v-on:click="send()" class="pm-button-new c-f pm-apply-foregift pm-apply-button">
                                    立即出价
                                    <br>
                                    <span class="foregift">
                                        加价幅度
                                        <em class="m-i">￥</em>
                                        <span th:text="${a.pAddPrice}"></span>
                                    </span>
                                </a>
                                <a href="javascript:void(0)" v-if="r.username != username" v-on:click="SignUp(username)" class="pm-button-new c-f pm-apply-foregift pm-apply-button">
                                    立即报名
                                    <br>
                                    <span class="foregift">
                                        保证金
                                        <em class="m-i">￥</em>
                                        <span th:text="${a.pCash}"></span>
                                    </span>
                                </a>
                            </div>
                        </dd>

                    </dl>
                </div>
<!--                显示参与人数-->
                <div class="bid-num">
                    <img src="https://img.alicdn.com/imgextra/i4/O1CN01ToO7bK1wTZWuouILe_!!6000000006309-2-tps-731-181.png" class="bidLog">
                    <span class="bid-num-join">
                        <em>{{count}}</em>人参与
                    </span>
                </div>
<!--                显示竞拍摊位的一些明细-->
                <div class="bidDetail">

                    <table class="bid-info">
                    <colgroup >
                        <col width="37%">
                        <col width="37%">
                        <col width>
                    </colgroup>
                        <thead> </thead>
                        <tbody class="">
                        <tr>
                            <td>
                                <span class="c-f pay-mark">保证金</span>
                                <span class="payPrice">:
                                    <em class="m-i">￥</em>
                                </span>
                                <span th:text="${a.pCash}">600</span>
                            </td>
                            <td>
                                <span class="c-f pay-mark">评估价</span>
                                <span class="payPrice" style="z-index: 99">:
                                    <em class="m-i">￥</em>
                                </span>
                                <span th:text="${a.pMinPrice}+200">600</span>
                            </td>

                        </tr>
                        <tr>
                            <td>
                                <span class="c-f pay-mark">起始价</span>
                                <span class="payPrice" style="z-index: 99">:
                                    <em class="m-i">￥</em>
                                </span>
                                <span th:text="${a.pStartauctionPrice}">600</span>
                            </td>
                            <td>
                                <span class="c-f pay-mark">运费</span>

                                <span>: 买家自提</span>
                            </td>
                            <td>
                                <span class="c-f pay-mark">延时周期 :</span>
                                <span th:text="${a.pDelayTime}"></span>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <span class="c-f pay-mark">加价幅度</span>
                                <span class="payPrice" style="z-index: 99">:
                                    <em class="m-i">￥</em>
                                </span>
                                <span th:text="${a.pAddPrice}">600</span>
                            </td>
                            <td>
                                <span class="c-f pay-mark pay-first">
                                    优先购买权人
                                    <em class="pay-first-icon"></em>
                                </span>
                                <span >: 无</span>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="3">

                                <span class="c-f pay-mark">竞价周期:</span>
                                <span th:text="${a.auctionCycle}"></span>
                            </td>
                        </tr>
                        </tbody>

                    </table>
                </div>
            </div>

            <!--竞拍室-->
            <div id="clear" class="auctionRoom-box">
                <div class="chat-box" v-for="g in msgList" style="border: 1px solid #f4f4f4">
                    <p><span style="font-weight: 700">出价者</span> : {{g.sender}}</p>
                    <p><span style="font-weight: 700">出价时间</span> : {{g.createTime}}</p>
                    <p><span style="font-weight: 700">出价金额</span> : {{g.content}} 元</p>
                </div>
<!--                <button th:onclick="ceshi()"></button>-->
            </div>
        </div>

    </div>



</div>




</body>

<script>
   function ceshi(){
       alert(app.r.pStartauctionPrice)
       alert(app.r.pMinPrice)
       alert(app.bidPrice)
   }

    var ws = '';


    var app=new Vue({
        el:"#app",
        data:{

            count:0,
            bidPrice:'',
            msgList:[],
            price:'',
            r:{},
            username:'',
            value:'',
            ceshi:1,
            roomList:[],
        },
        methods:{
            initRoomData: function(){
                $.post("/auctionRoom/selectRoomByStallId",{
                    stallId: [[${stallId}]]
                },function (d){
                    console.log(d)
                    app.r = d;

                })
            },
            //加价
            addPrice(currentPrice , addPrice){
                console.log(currentPrice)
                console.log(addPrice)
               let price =  document.getElementById("price-input")
                var number = parseInt(addPrice);
               var number1 = parseInt(price.value);
               price.value = number + number1
            },
                //减价
            ReducedPrice(currentPrice , reducePrice){
                console.log(currentPrice)
                console.log(reducePrice)
                let price =  document.getElementById("price-input")
                var number = parseInt(reducePrice);
                var number1 = parseInt(price.value);
                var bidPrice = app.bidPrice;

                if(number1 <= bidPrice){
                    alert("抱歉 ， 已经是当前最低价了哦！")
                    return
                }else {
                    price.value = number1 - number
                }
            },
            SignUp(user){
                console.log("123123123")
                console.log(user)
                $.post("/auctionRoom/signUp",{
                    username: app.username,
                    stallId: [[${stallId}]]
                },function (d){
                    console.log(d)
                    alert("恭喜"+app.username+"贵宾报名成功！！！")
                    location.reload();
                })
                location.reload();


            },
            initUser: function(){
                $.post("/auctionRoom/selectUser",{},function (d){
                    console.log(d)
                    app.username = d;
                })
            },
            send: function () {
                let currentPrice = app.bidPrice
                let price = document.getElementById("price-input")
                var number1 = parseInt(price.value);
                app.bidPrice = number1
                if(currentPrice >= number1){
                    alert("还需要再加价格哦！")
                    return
                }else {
                    ws.send(number1);
                    $.post("/auctionRoom/bidPrice",{
                        username: app.username,
                        stallId: [[${stallId}]],
                        bidPrice: number1
                    },function (d){
                        console.log(d)
                        // alert("恭喜"+app.username+"出价成功！！！")
                    })
                    console.log("发送之后得到=="+app.bidPrice)

                }

            },
            getMaxBidPrice: function(){
                $.post("/auctionRoom/getMaxBidPrice",{
                    stallId: [[${stallId}]]
                },function (d){
                    console.log("得到的最高价是=="+d)
                    app.bidPrice = d;
                    let price =  document.getElementById("price-input")
                    price.value = d
                })
            }
        },
        mounted: function (){

            this.getMaxBidPrice()
            this.initUser();
            this.initRoomData();
             ws=new WebSocket("ws://"+location.host+"/wspush?roomId="+[[${stallId}]]);

        }
    });




    ws.onmessage=function (e){
        console.log(e);
        var number = parseInt(e.data.content);
        console.log("number为"+number)
        // alert("又有贵宾出价啦")
        app.msgList.push(JSON.parse(e.data));
        app.getMaxBidPrice()
        app.count = JSON.parse(e.data).count;
    }

   function addPrice1(currentPrice , addPrice){
        console.log(currentPrice)
        console.log(addPrice)
        let price =  document.getElementById("price-input")
        var number = parseInt(addPrice);
        var number1 = parseInt(price.value);
        price.value = number + number1
    }


   function ReducedPrice1(currentPrice , reducePrice){
       currentPrice = app.bidPrice
        console.log(currentPrice)
        console.log(reducePrice)
        let price =  document.getElementById("price-input")
        var number = parseInt(reducePrice);
        var number1 = parseInt(price.value);
        if(number1 <= currentPrice){
            alert("抱歉 ， 已经是当前最低价了哦！")
            return
        }else {
            price.value = number1 - number
        }
    }

    //获取元素
    var day = document.querySelector('.day');
    var hour = document.querySelector('.hour');
    var minute = document.querySelector('.minute');
    var second = document.querySelector('.second');
    var endTime=$("#endTime").children("div:eq(0)").children("div:eq(2)").children("div:eq(0)").children("span:eq(1)").text();
    // .find("div:eq(2)").find("div:eq(0)").find("span:eq(1)")
    console.log(endTime)
    var inputtime = +new Date(endTime);//'2022-08-14 22:00:00'
    // var inputtime = +new Date('2022-08-05 11:04:00');//'2022-08-14 22:00:00'

    countDown(); //我们先调用一次这个函数，防止第一次刷新页面有空白
    //2.开启定时器
    setInterval(countDown,1000);

    function countDown() {
        var nowtime = +new Date();  //返回的是当前时间总的毫秒数
        var times = (inputtime - nowtime)/1000;  //剩余时间总的毫秒数
        var d = parseInt(times/60/60/24); //天
        d = d < 10 ? '0' +d :d ;
        day.innerHTML = d;
        var h = parseInt(times/60/60%24);  //时
        h = h < 10 ? '0' +h :h ;
        hour.innerHTML = h;
        var m = parseInt(times/60%60); //分
        m = m < 10 ? '0' +m :m ;
        minute.innerHTML = m;
        var s = parseInt(times%60);  //当前的秒
        s = s < 10 ? '0' +s :s ;
        second.innerHTML = s;
    }


    function subMitOeder(){
        var nowTime = +new Date();
        var delay = inputtime - nowTime;
        console.log(delay)
        var timeout = setTimeout(function () {
            let maxPrice = app.bidPrice;
            if (maxPrice <= app.r.pMinPrice) {
                alert("抱歉，当前价格低于最低竞拍价 ，该摊位进行流拍")
                $.post("/auctionRoom/updateAuctionStallStatus", {
                    stallId: [[${stallId}]],
                }, function (d) {
                    console.log(d)
                })
                location.href = "/index/main";
            } else {
                $.post("/auctionRoom/getWinner", {
                    stallId: [[${stallId}]],
                    bidPrice: app.bidPrice
                }, function (d) {
                    console.log(d)
                    if (d == 1) {
                        alert("竞拍已结束 ， 感谢大家的参与!")
                        location.href = "/index/main";
                    }
                })
            }
            console.log('hello 我执行了')
        }, delay);
    }
    subMitOeder();





</script>